<template>
  <div class="boxLog">
    <Head @showMenu="showMn = true" class="header" />
    <Menu :showMenu="showMn" @closeMenu="showMn = false" />
    <div class="page-nav">
      <div class="back-content" @click.stop="goToBack">
        <span class="icon iconfont back">&#xe6dc;</span>
      </div>
      <div class="page-title">Open Record</div>
    </div>
    <div class="boxLog-content">
      <div class="table">
        <div class="no-data" v-if="data.length == 0">
          <span class="icon iconfont empty">&#xe642;</span>
        </div>
      </div>
    </div>
    <div class="log-list">
      <div class="log-item level-4">
        <div class="log-item-time">2022-10-17T07:19:49.000000Z</div>
        <div class="log-item-head">
          <img
            class="log-box-cover"
            src="https://img.fcgbox.com/box/61.png"
            draggable="false"
          />
          <div>
            <div class="box-name">RollingBox</div>
            <div class="log-price">$ 99.00</div>
          </div>
        </div>
        <div class="log-good">
          <div class="log-good-title">Unpacking results</div>
          <div class="log-good-row">
            <img
              class="log-box-cover"
              src="https://img.fcgbox.com/hd_goods/7669.webp"
              draggable="false"
            />
            <div>
              <div class="box-name u-line-2">vouchers</div>
              <div class="log-price">$ 3.90</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../../../components/head/header.vue";
import Menu from "../../../components/menu";
import { mapState } from "vuex";
export default {
  name: "boxLog",
  components: {
    Head,
    Menu,
  },
  computed: {
    ...mapState([
      "bgColor",
      "reviewSearchBgColor",
      "color",
      "nav_bc",
      "main_bc_opacity",
      "main_bc_0_8",
      "main_color_0_1",
      "main_color_0_1_1",
      "main_bc_invert",
      "content_bc",
      "sub_color",
      "text_color",
      "dm_bc",
      "price_border",
      "main_bc_color",
      "item_bc",
      "menu_color",
      "unboxing_im_bc",
      "menu_d_bg",
      "menu_border",
      "pop_bg",
      "main_bc_color",
      "tab_bc",
    ]),
  },
  mounted() {
    this.active = this.$route.query.type;
  },
  data() {
    return {
      active: 0,
      showMn: false,
      titles: ["ALL", "CONDUCT", "COMPLETED"],
      data: [],
    };
  },
  methods: {
    goToBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.boxLog {
  height: 100%;
  width: 100%;
  .header {
    position: relative;
  }
  .page-nav {
    width: 100%;
    height: 44px;
    background: var(--content-bc);
    padding-right: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    // margin-top: 96px;
    color: var(--text-color);
    .back-content {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .back {
        font-size: 22px;
        font-weight: 600;
      }
    }
    .page-title {
      font-size: 16px;
      font-weight: 500;
      margin: auto;
    }
  }
  .table {
    background: var(--main-bc-color);
    .no-data {
      color: #fff;
      /* font-size: 74px; */
      margin: 0 auto;
      text-align: center;
      margin-top: 14px;
      .empty {
        font-size: 57px;
      }
    }
  }

  .log-list {
    padding: 10px 12px;
    .log-good {
      padding: 10px 10px;
      .log-good-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .log-good-title {
        font-size: 14px;
        font-weight: 260px;
        margin-bottom: 5px;
        color: #999;
      }
    }
    .box-name {
      color: var(--text-color);
    }
    .log-price {
      color: #00dcab;
    }
    .log-box-cover {
      width: 83px;
      height: 83px;
      margin-right: 8px;
      flex-shrink: 0;
    }
    .log-item-head {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
    }
    .level-4 {
      color: #fb7eff;
    }
    .log-item-time {
      padding: 5px 10px;
      padding-top: 10px;
      font-size: 14px;
      color: #999;
    }
    .log-item {
      width: 100%;
      background-color: var(--content-bc);
      margin-bottom: 10px;
      position: relative;
      border-radius: 4px;
      border-bottom: 4px solid;
    }
  }
}
</style>